/**
 * 折线图组件
 * 用于展示数据趋势和变化
 */

import React from 'react';
import { Line } from 'react-chartjs-2';
import { ChartData, ChartOptions, LineChartCustomOptions } from '../types';

interface LineChartProps {
  data: ChartData;
  options?: ChartOptions;
  height?: number;
  customOptions?: LineChartCustomOptions;
}

const LineChart: React.FC<LineChartProps> = ({
  data,
  options,
  height = 400,
  customOptions,
}) => {
  // 将数据转换为折线图格式
  const lineData = {
    ...data,
    datasets: data.datasets.map(dataset => ({
      ...dataset,
      type: 'line',
      fill: customOptions?.fill ?? false,
      tension: customOptions?.tension ?? 0,
      pointRadius: customOptions?.pointRadius ?? 3,
      pointHoverRadius: customOptions?.pointHoverRadius ?? 5,
      pointStyle: customOptions?.pointStyle,
      borderWidth: customOptions?.borderWidth ?? (dataset as any).borderWidth ?? 2,
    })),
  };

  const chartOptions: any = {
    ...options,
    scales: {
      x: {
        beginAtZero: false,
      },
      y: {
        beginAtZero: true,
      },
    },
  };

  return <Line data={lineData as any} options={chartOptions} height={height} />;
};

export default LineChart;

